<template>
  <div>
    <div>
      <a-card style="width: 100%">
        <div slot="title">
          <span>文章列表</span>
          <a-button type="primary" :style="{ margin: '0 17px' }" @click="add"
            >增加文章</a-button>
        </div>
        <a-table
          :columns="columns"
          :data-source="artList"
          rowKey="id"
          :pagination="{
            total: this.total,
            current: this.current,
            pageSize: this.pageSize,
          }"
          @change="change"
        >
          <a slot="name" slot-scope="text">{{ text }}</a>
          <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
          <span slot="tags" slot-scope="tags">
            <a-tag
              v-for="tag in tags"
              :key="tag"
              :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
            >
              {{ tag.toUpperCase() }}
            </a-tag>
          </span>
          <span slot="action" slot-scope="text, record">
            <a>Invite 一 {{ record.name }}</a>
            <a-divider type="vertical" />
            <a>Delete</a>
            <a-divider type="vertical" />
            <a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
          </span>
          <span slot="thumb" slot-scope="text, record">
            <img :src="record.thumb" />
          </span>
          <div slot="operate" slot-scope="text, record">
            <a-button
              type="primary"
              size="small"
              :style="{ marginRight: '17px' }"
              @click="edit(record.id)"
            >
              编辑</a-button>
            <a-button type="danger" size="small" @click="del(record.id)"
              >删除</a-button>
        </div>
        </a-table>
      </a-card>
    </div>
  </div>
</template>

<script>
import { fetchArtList, delArt } from '../../../../api'

const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title'
  },
  {
    title: '描述',
    dataIndex: 'desc',
    key: 'desc'
  },
  {
    title: '作者',
    dataIndex: 'author',
    key: 'author'
  },
  {
    title: '封面图片',
    dataIndex: 'thumb',
    key: 'thumb',
    scopedSlots: { customRender: 'thumb' }
  },
  {
    title: '阅读次数',
    key: 'readTimes',
    dataIndex: 'readTimes'
  },
  {
    title: '创建时间',
    key: 'createdTime',
    dataIndex: 'createdTime'
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'operate' },
    key: 'operate'
  }
]

export default {
  data () {
    return {
      columns,
      artList: [],
      total: 0, // 分页器中的数据
      current: 1, // 默认是第一页的内容
      pageSize: 3 // 默认 一页内容有多少
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 删除
    del (id) {
      this.$confirm({
        title: '您确认删除吗?',
        onOk: () => {
          delArt({
            id
          }).then(res => {
            if (res.data.code === 200) {
              this.$message.success('删除成功', 1, () => {
                this.$router.go(0)
              })
            }
          })
        },
        onCancel () {}
      })
    },
    // 增加
    add () {
      this.$router.push('/admin/artadd')
    },
    // 编辑
    edit (id) {
      // console.log(id)
      this.$router.push(`/admin/artEdit/${id}`)
    },
    // 点击分页器切换分页的方法
    change (page, pageSize) {
      console.log(page.current, page.pageSize)
      this.current = page.current
      this.pageSize = page.pageSize
      this.getList()
    },
    getList () {
      fetchArtList().then(res => {
        if (res.data.code === 200) {
          // console.log(res)
          this.artList = res.data.data.artList
          this.total = res.data.data.count
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
